<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkHub - 登录/注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #4a6fa5;
            --primary-light: #5d84c0;
            --secondary: #6b8cbc;
            --accent: #f9a826;
            --content: #28a745;
            --light: #f8f9fa;
            --dark: #343a40;
            --gray: #e9ecef;
            --gray-dark: #adb5bd;
            --success: #28a745;
            --danger: #dc3545;
            --text: #495057;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --radius: 8px;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #eef2f7, #d6e3f8);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-family: 'Noto Serif SC', serif;
            font-size: 1.8rem;
            font-weight: 700;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 2rem;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav li {
            margin-left: 25px;
        }
        
        nav a {
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
        }
        
        nav a:hover, nav a.active {
            color: white;
        }
        
        nav a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent);
            border-radius: 3px;
        }
        
        .user-actions {
            display: flex;
            align-items: center;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: var(--radius);
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-size: 1rem;
        }
        
        .btn-primary {
            background-color: var(--accent);
            color: white;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.7);
            color: white;
            margin-right: 15px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        /* 主内容区 */
        .auth-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            padding: 40px 0;
            background: linear-gradient(to bottom, var(--primary-light), var(--primary));
        }
        
        .auth-content {
            width: 100%;
            max-width: 1100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .auth-illustration {
            flex: 1;
            padding: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .illustration-container {
            max-width: 500px;
            text-align: center;
            color: white;
        }
        
        .illustration-container h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            font-family: 'Noto Serif SC', serif;
        }
        
        .illustration-container p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .feature {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: var(--radius);
            padding: 20px;
            width: 180px;
            text-align: center;
            transition: var(--transition);
        }
        
        .feature:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.25);
        }
        
        .feature i {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: var(--accent);
        }
        
        .feature h3 {
            font-size: 1.1rem;
            margin-bottom: 8px;
        }
        
        .auth-forms {
            flex: 1;
            max-width: 500px;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-left: 30px;
        }
        
        .auth-tabs {
            display: flex;
            background: var(--light);
        }
        
        .auth-tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }
        
        .auth-tab:not(.active):hover {
            background: rgba(74, 111, 165, 0.1);
        }
        
        .auth-tab.active {
            background: white;
            color: var(--primary);
        }
        
        .auth-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent);
        }
        
        .form-container {
            padding: 30px;
        }
        
        .auth-card h2 {
            text-align: center;
            margin-bottom: 25px;
            color: var(--dark);
            font-size: 1.8rem;
            font-family: 'Noto Serif SC', serif;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border: 1px solid var(--gray);
            color: var(--text);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-google {
            color: #DB4437;
        }
        
        .btn-wechat {
            color: #09BB07;
        }
        
        .btn-qq {
            color: #12B7F5;
        }
        
        .divider {
            position: relative;
            text-align: center;
            margin: 25px 0;
            color: var(--gray-dark);
        }
        
        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--gray);
            z-index: 1;
        }
        
        .divider span {
            position: relative;
            z-index: 2;
            background-color: white;
            padding: 0 15px;
        }
        
        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-group {
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-dark);
        }
        
        .form-control {
            width: 100%;
            padding: 14px 15px 14px 45px;
            border: 1px solid var(--gray);
            border-radius: var(--radius);
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--gray-dark);
            cursor: pointer;
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0 20px;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
        }
        
        .remember-me input {
            margin-right: 8px;
        }
        
        .forgot-password {
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .forgot-password:hover {
            text-decoration: underline;
        }
        
        .auth-submit {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 14px;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 10px rgba(74, 111, 165, 0.3);
        }
        
        .auth-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(74, 111, 165, 0.4);
        }
        
        .auth-footer {
            text-align: center;
            margin-top: 25px;
            color: var(--text);
        }
        
        .auth-footer a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .auth-footer a:hover {
            text-decoration: underline;
        }
        
        /* 页脚 */
        footer {
            background-color: var(--dark);
            color: rgba(255, 255, 255, 0.7);
            padding: 30px 0 15px;
            margin-top: auto;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-column h4 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column li {
            margin-bottom: 10px;
        }
        
        .footer-column a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .footer-column a:hover {
            color: white;
            padding-left: 5px;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .auth-content {
                flex-direction: column;
            }
            
            .auth-illustration {
                padding: 30px 0;
                text-align: center;
            }
            
            .illustration-container {
                max-width: 100%;
            }
            
            .auth-forms {
                margin-left: 0;
                margin-top: 20px;
                max-width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-wrap: wrap;
            }
            
            nav ul {
                margin-top: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            nav li {
                margin: 5px 10px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .auth-tabs {
                margin-bottom: 0;
            }
            
            .features {
                display: none;
            }
        }
        
        @media (max-width: 576px) {
            .logo {
                font-size: 1.5rem;
            }
            
            .logo i {
                font-size: 1.7rem;
            }
            
            .form-container {
                padding: 20px;
            }
            
            .auth-card h2 {
                font-size: 1.5rem;
            }
            
            .remember-forgot {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
            
            .btn-outline {
                margin-right: 10px;
            }
            
            .auth-tab {
                padding: 15px;
                font-size: 1rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .form-container {
            animation: fadeIn 0.6s ease forwards;
        }
        
        /* 表单验证样式 */
        .form-group.error .form-control {
            border-color: var(--danger);
        }
        
        .error-message {
            color: var(--danger);
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
        }
        
        .form-group.error .error-message {
            display: block;
        }
        
        /* 密码强度指示器 */
        .password-strength {
            height: 5px;
            border-radius: 5px;
            margin-top: 8px;
            background-color: var(--gray);
            position: relative;
            overflow: hidden;
        }
        
        .password-strength::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0;
            background-color: var(--danger);
            transition: width 0.3s ease;
        }
        
        .password-strength.weak::before {
            width: 30%;
            background-color: var(--danger);
        }
        
        .password-strength.medium::before {
            width: 60%;
            background-color: var(--accent);
        }
        
        .password-strength.strong::before {
            width: 100%;
            background-color: var(--success);
        }
        
        .strength-text {
            font-size: 0.8rem;
            margin-top: 5px;
            text-align: right;
            color: var(--gray-dark);
        }
        
        /* 水波动画 */
        .ripple {
            position: relative;
            overflow: hidden;
        }
        
        .ripple:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform .5s, opacity 1s;
        }
        
        .ripple:active:after {
            transform: scale(0, 0);
            opacity: .3;
            transition: 0s;
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header id="main-header">
        <div class="container header-content">
            <div class="logo">
                <i class="fas fa-link"></i>
                <span>云合智享</span>
            </div>
            <nav>
                <ul>
                    <li><a href="boke.html" class="active">首页</a></li>
                    <li><a href="./faxain.html">发现</a></li>
                    <li><a href="./guangchang.html">广场</a></li>
                    <li><a href="./ermen.html">热门</a></li>
                    <li><a href="./fenlie.html">分类</a></li>
                                   
                </ul>
            </nav>
            <div class="user-actions">
                <button class="btn btn-outline">登录</button>
                <button class="btn btn-primary">发布链接</button>
            </div>
        </div>
    </header>

    <!-- 登录/注册内容区 -->
    <main class="auth-container">
        <div class="container auth-content">
            <div class="auth-illustration">
                <div class="illustration-container">
                    <h1>加入LinkHub社区</h1>
                    <p>发现全网优质拉新活动，分享您的邀请链接，与社区成员一起获得奖励</p>
                    
                    <div class="features">
                        <div class="feature">
                            <i class="fas fa-gift"></i>
                            <h3>奖励丰富</h3>
                            <p>现金红包、会员福利等</p>
                        </div>
                        <div class="feature">
                            <i class="fas fa-users"></i>
                            <h3>社区互动</h3>
                            <p>与用户交流心得</p>
                        </div>
                        <div class="feature">
                            <i class="fas fa-shield-alt"></i>
                            <h3>安全可靠</h3>
                            <p>严格审核活动真实性</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="auth-forms">
                <div class="auth-tabs">
                    <div class="auth-tab active ripple" id="login-tab">登录账号</div>
                    <div class="auth-tab ripple" id="register-tab">注册账号</div>
                </div>
                
                <!-- 登录表单 -->
                <div class="form-container" id="login-card">
                    <h2>欢迎回来</h2>
                    
                    <div class="social-login">
                        <button class="social-btn btn-google ripple">
                            <i class="fab fa-google"></i>
                        </button>
                        <button class="social-btn btn-wechat ripple">
                            <i class="fab fa-weixin"></i>
                        </button>
                        <button class="social-btn btn-qq ripple">
                            <i class="fab fa-qq"></i>
                        </button>
                    </div>
                    
                    <div class="divider">
                        <span>或使用邮箱登录</span>
                    </div>
                    
                    <form class="auth-form" id="login-form">
                        <div class="form-group">
                            <label for="login-email">邮箱地址</label>
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="login-email" class="form-control" placeholder="请输入您的邮箱" required>
                            </div>
                            <div class="error-message">请输入有效的邮箱地址</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="login-password">密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="login-password" class="form-control" placeholder="请输入您的密码" required>
                                <button type="button" class="password-toggle">
                                    <i class="far fa-eye"></i>
                                </button>
                            </div>
                            <div class="error-message">密码不能为空</div>
                        </div>
                        
                        <div class="remember-forgot">
                            <div class="remember-me">
                                <input type="checkbox" id="remember-me">
                                <label for="remember-me">记住我</label>
                            </div>
                            <a href="#" class="forgot-password">忘记密码?</a>
                        </div>
                        
                        <button type="submit" class="auth-submit ripple">登录</button>
                    </form>
                    
                    <div class="auth-footer">
                        还没有账号? <a href="#" id="switch-to-register">立即注册</a>
                    </div>
                </div>
                
                <!-- 注册表单 -->
                <div class="form-container" id="register-card" style="display: none;">
                    <h2>创建账号</h2>
                    
                    <div class="social-login">
                        <button class="social-btn btn-google ripple">
                            <i class="fab fa-google"></i>
                        </button>
                        <button class="social-btn btn-wechat ripple">
                            <i class="fab fa-weixin"></i>
                        </button>
                        <button class="social-btn btn-qq ripple">
                            <i class="fab fa-qq"></i>
                        </button>
                    </div>
                    
                    <div class="divider">
                        <span>或使用邮箱注册</span>
                    </div>
                    
                    <form class="auth-form" id="register-form">
                        <div class="form-group">
                            <label for="register-username">用户名</label>
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" id="register-username" class="form-control" placeholder="设置您的用户名" required>
                            </div>
                            <div class="error-message">用户名长度需在3-20个字符之间</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-email">邮箱地址</label>
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="register-email" class="form-control" placeholder="请输入您的邮箱" required>
                            </div>
                            <div class="error-message">请输入有效的邮箱地址</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-password">设置密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="register-password" class="form-control" placeholder="设置您的密码" required>
                                <button type="button" class="password-toggle">
                                    <i class="far fa-eye"></i>
                                </button>
                            </div>
                            <div class="password-strength"></div>
                            <div class="strength-text">密码强度: <span id="strength-value">弱</span></div>
                            <div class="error-message">密码至少8个字符，包含字母和数字</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-confirm">确认密码</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="register-confirm" class="form-control" placeholder="请再次输入密码" required>
                                <button type="button" class="password-toggle">
                                    <i class="far fa-eye"></i>
                                </button>
                            </div>
                            <div class="error-message">两次输入的密码不一致</div>
                        </div>
                        
                        <div class="remember-me" style="margin: 10px 0 20px;">
                            <input type="checkbox" id="terms" required>
                            <label for="terms">我已阅读并同意 <a href="#" style="color: var(--primary);">服务条款</a> 和 <a href="#" style="color: var(--primary);">隐私政策</a></label>
                        </div>
                        
                        <button type="submit" class="auth-submit ripple">注册账号</button>
                    </form>
                    
                    <div class="auth-footer">
                        已有账号? <a href="#" id="switch-to-login">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h4>关于 LinkHub</h4>
                    <ul>
                        <li><a href="#">平台介绍</a></li>
                        <li><a href="#">团队故事</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">媒体报道</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>使用帮助</h4>
                    <ul>
                        <li><a href="#">新手指南</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">发布规范</a></li>
                        <li><a href="#">奖励说明</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>政策条款</h4>
                    <ul>
                        <li><a href="#">用户协议</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">免责声明</a></li>
                        <li><a href="#">举报机制</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>联系我们</h4>
                    <ul>
                        <li><a href="#"><i class="fas fa-envelope"></i> contact@linkhub.com</a></li>
                        <li><a href="#"><i class="fab fa-weixin"></i> 官方微信</a></li>
                        <li><a href="#"><i class="fab fa-weibo"></i> 官方微博</a></li>
                        <li><a href="#"><i class="fas fa-headset"></i> 在线客服</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                &copy; 2023 LinkHub 拉新活动分享平台 | 让邀请变得更简单
            </div>
        </div>
    </footer>

    <script>
        // 登录/注册表单切换
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const loginCard = document.getElementById('login-card');
            const registerCard = document.getElementById('register-card');
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');
            
            function showLogin() {
                loginTab.classList.add('active');
                registerTab.classList.remove('active');
                loginCard.style.display = 'block';
                registerCard.style.display = 'none';
            }
            
            function showRegister() {
                registerTab.classList.add('active');
                loginTab.classList.remove('active');
                registerCard.style.display = 'block';
                loginCard.style.display = 'none';
            }
            
            loginTab.addEventListener('click', showLogin);
            registerTab.addEventListener('click', showRegister);
            switchToRegister.addEventListener('click', function(e) {
                e.preventDefault();
                showRegister();
            });
            switchToLogin.addEventListener('click', function(e) {
                e.preventDefault();
                showLogin();
            });
            
            // 密码可见性切换
            document.querySelectorAll('.password-toggle').forEach(toggle => {
                toggle.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    const icon = this.querySelector('i');
                    
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                });
            });
            
            // 表单验证
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 邮箱验证
                const email = document.getElementById('login-email');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value)) {
                    email.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    email.closest('.form-group').classList.remove('error');
                }
                
                // 密码验证
                const password = document.getElementById('login-password');
                if (password.value.length < 6) {
                    password.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    password.closest('.form-group').classList.remove('error');
                }
                
                if (isValid) {
                    // 显示加载状态
                    const submitBtn = this.querySelector('.auth-submit');
                    const originalText = submitBtn.innerHTML;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
                    submitBtn.disabled = true;
                    
                    // 模拟登录成功
                    setTimeout(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                        alert('登录成功！即将跳转到首页...');
                        // window.location.href = 'index.html';
                    }, 1500);
                }
            });
            
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 用户名验证
                const username = document.getElementById('register-username');
                if (username.value.length < 3 || username.value.length > 20) {
                    username.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    username.closest('.form-group').classList.remove('error');
                }
                
                // 邮箱验证
                const email = document.getElementById('register-email');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value)) {
                    email.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    email.closest('.form-group').classList.remove('error');
                }
                
                // 密码验证
                const password = document.getElementById('register-password');
                const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
                if (!passwordRegex.test(password.value)) {
                    password.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    password.closest('.form-group').classList.remove('error');
                }
                
                // 确认密码验证
                const confirm = document.getElementById('register-confirm');
                if (confirm.value !== password.value) {
                    confirm.closest('.form-group').classList.add('error');
                    isValid = false;
                } else {
                    confirm.closest('.form-group').classList.remove('error');
                }
                
                // 条款同意验证
                const terms = document.getElementById('terms');
                if (!terms.checked) {
                    terms.closest('.remember-me').style.color = 'var(--danger)';
                    isValid = false;
                } else {
                    terms.closest('.remember-me').style.color = '';
                }
                
                if (isValid) {
                    // 显示加载状态
                    const submitBtn = this.querySelector('.auth-submit');
                    const originalText = submitBtn.innerHTML;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
                    submitBtn.disabled = true;
                    
                    // 模拟注册成功
                    setTimeout(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                        alert('注册成功！欢迎加入LinkHub社区');
                        showLogin();
                    }, 1500);
                }
            });
            
            // 密码强度检测
            const passwordInput = document.getElementById('register-password');
            const strengthBar = document.querySelector('.password-strength');
            const strengthValue = document.getElementById('strength-value');
            
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                let value = '';
                
                if (password.length === 0) {
                    strengthBar.className = 'password-strength';
                    strengthValue.textContent = '';
                    return;
                }
                
                // 长度检查
                if (password.length >= 8) strength += 1;
                if (password.length >= 12) strength += 1;
                
                // 字符多样性检查
                if (/[A-Z]/.test(password)) strength += 1;
                if (/[a-z]/.test(password)) strength += 1;
                if (/[0-9]/.test(password)) strength += 1;
                if (/[^A-Za-z0-9]/.test(password)) strength += 1;
                
                // 更新UI
                if (strength <= 2) {
                    strengthBar.className = 'password-strength weak';
                    value = '弱';
                } else if (strength <= 4) {
                    strengthBar.className = 'password-strength medium';
                    value = '中';
                } else {
                    strengthBar.className = 'password-strength strong';
                    value = '强';
                }
                
                strengthValue.textContent = value;
            });
            
            // 添加水波动画
            const rippleButtons = document.querySelectorAll('.ripple');
            rippleButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    const circle = document.createElement('span');
                    circle.className = 'ripple-effect';
                    circle.style.left = x + 'px';
                    circle.style.top = y + 'px';
                    
                    this.appendChild(circle);
                    
                    setTimeout(() => {
                        circle.remove();
                    }, 600);
                });
            });
        });
    </script>
</body>
</html>